<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <div class="continer">
      <div class="continer-top">
        <div class="tag-area">
          <img src="@/assets/images/loginset/trumpet.png" alt="" />
          <span>首页导航配置说明：</span>
          <span>1、首页导航模块最多只能创建6个。</span>
          <span>2、每个模块内最多只能配置5个菜单。</span>
        </div>
        <div class="add-area" v-if="cardArr.length < 6">
          <div
            class="add-button"
            v-hasPermi="['system:dynamicMenu:add']"
            @click="showModel('operate', {})"
          >
            <i class="el-icon-plus"></i>
            <span class="name">新增导航模块</span>
          </div>
        </div>
      </div>
      <div class="continer-mid">
        <div class="card" v-for="(item, index) in cardArr" :key="index">
          <div class="card-continer">
            <img class="card-logo" :src="baseUrl + item.logImg1" alt="" />
            <span class="title">{{ item.name }}</span>
            <div
              class="router-area"
              v-if="item.children && item.children.length > 0"
            >
              <div
                class="router-item"
                v-for="(tig, tindex) in item.children"
                :key="tindex"
              >
                <span>{{ tig.name }}</span>
                <el-button
                  v-if="tig.sysMenuId != 2597"
                  class="item-delete"
                  type="text"
                  icon="el-icon-delete"
                  @click="handlerDelete(tig, 2)"
                  v-hasPermi="['system:dynamicMenu:remove']"
                ></el-button>
              </div>
            </div>
            <el-tooltip
              class="item"
              effect="light"
              content="添加导航菜单"
              placement="top"
            >
              <img
                class="add-img"
                src="@/assets/images/loginset/add.png"
                v-if="!item.children || item.children.length < 5"
                @click="showModel('addrouter', item)"
                alt=""
                v-hasPermi="['system:dynamicMenu:add']"
              />
            </el-tooltip>
          </div>
          <img class="back-image" :src="baseUrl + item.logImg2" alt="" />
          <div class="shade"></div>
          <div class="button-area">
            <el-button
              type=""
              class="button"
              @click="showModel('operate', item)"
              size="mini"
              v-hasPermi="['system:dynamicMenu:modify']"
            >
              编辑
            </el-button>
            <el-button
              type=""
              class="button"
              @click="handlerDelete(item, 1)"
              size="mini"
              :disabled="item.name == '数字管家'"
              v-hasPermi="['system:dynamicMenu:remove']"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
      <div class="continer-bot"></div>
    </div>
    <component
      :is="modelName"
      :id="id"
      :visible.sync="show"
      @close="close"
    ></component>
  </lb-layout>
</template>

<script>
import { getNavdetailList, deleteItem } from "@/api/navset/index.js";
import operate from "@/views/configuration/navset/components2/operate.vue";
import addrouter from "@/views/configuration/navset/components2/addrouter.vue";
export default {
  components: {
    operate,
    addrouter,
  },
  data() {
    return {
      //弹窗
      id: "",
      modelName: "",
      show: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      cardArr: [],
    };
  },
  created() {},
  mounted() {
    this.getCardlist();
  },
  methods: {
    getCardlist() {
      this.initData();
    },
    async initData() {
      let that = this;
      let id = 1;
      await getNavdetailList(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "list");
          that.cardArr = res?.data?.dynamicMenuConfigItemVos ?? [];
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    // 弹窗
    showModel(name, params) {
      this.modelName = name;
      this.id = params?.id || "";
      setTimeout(() => {
        this.show = true;
      }, 200);
    },
    close(status) {
      this.show = false;
      setTimeout(() => {
        if (status) this.getCardlist();
      }, 200);
    },
    // 删除
    handlerDelete(row, falge) {
      // console.log(row, "row");
      let that = this;
      let id = row.id;
      let title, tip;
      title = row?.name ?? "该导航";
      if (falge == 1) {
        tip = "模块";
      } else if (falge == 2) {
        tip = "路由";
      }
      const text = "是否确认删除" + title + tip + "？";
      this.$modal
        .confirm(text)
        .then(() => {
          that.delectRequest(id);
        })
        .catch((err) => {
          that.$message({
            message: "取消删除",
          });
        });
    },
    // 删除模块 和  删除路由对象
    delectRequest(id) {
      let that = this;
      deleteItem(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.$message.success("已删除!");
          that.getCardlist();
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.continer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  background: url("~@/assets/images/nav/navBackground-small.png") center bottom
    no-repeat;
  background-size: cover;
  background-blend-mode: luminosity;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  .continer-top {
    width: 100%;
    height: 100px;
    margin: 50px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tag-area {
      margin-left: 20px;
      width: 1058px;
      height: 60px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 0px 0px 0px 0px;
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        margin: 0 10px 0 20px;
      }
      span {
        font-size: 22px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 26px;
      }
    }
    .add-area {
      margin-right: 20px;
      .add-button {
        width: 200px;
        height: 40px;
        background-image: url("~@/assets/images/loginset/add-card.png");
        background-size: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-icon-plus {
          font-size: 20px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
          margin-right: 20px;
        }
        .name {
          font-size: 20px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
          letter-spacing: 1px;
        }
      }
      // .el-button {
      //   margin-left: 10px;
      // }
    }
  }
  .continer-mid {
    margin-top: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .card {
      width: 250px;
      height: 370px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .back-image {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      .shade {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        background: rgba(0, 0, 0, 0.2);
      }
      .card-continer {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        .card-logo {
          width: 60px;
          height: 60px;
          margin-top: 20px;
        }
        .title {
          font-size: 30px;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 45px;
          margin: 5px 0;
          cursor: default;
        }
        .router-area {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .router-item {
            height: 30px;
            margin: 4px 0;
            position: relative;
            span {
              font-size: 22px;
              font-family: ArialMT;
              color: #ffffff;
              line-height: 30px;
              cursor: default;
            }
            .item-delete {
              position: absolute;
              font-size: 20px;
              line-height: 24px;
              top: -7px;
              margin-left: 5px;
              color: #a4a4a4;
            }
          }
        }
        .add-img {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }
      }
      .button-area {
        z-index: 4;
        position: absolute;
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        bottom: 5px;
        .button {
          width: 72px;
          height: 32px;
          background: rgba(5, 163, 250, 0.5);
          border-radius: 0px 0px 0px 0px;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFang SC-Regular, PingFang SC;
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
          line-height: 26px;
        }
      }
    }
  }
}
// .button-p {
//   width: 72px;
//   height: 32px;
//   background: rgba(5, 163, 250, 0.5);
//   border-radius: 0px 0px 0px 0px;
//   border: none;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-family: PingFang SC-Regular, PingFang SC;
//   font-size: 18px;
//   font-weight: 400;
//   color: #ffffff;
//   line-height: 26px;
// }
// .button-d {
//   background: rgba(117, 0, 0, 0.5);
//   border: #750000;
//   color: #ff4040;
// }
</style>
